<template>
  <div id="top-header">
    <!-- <dv-decoration-8 class="header-left-decoration" />
    <dv-decoration-5 class="header-center-decoration" />
    <dv-decoration-8 class="header-right-decoration" :reverse="true" /> -->
    <div class="header_left">
      <img src="../../assets/img/header/icon.png" alt="">
      <p>{{ weatherinfo.temp || '15℃' }}</p>
      <p>{{ weatherinfo.weather || "晴" }}</p>
      <p>{{weatherinfo.WD || '风力'}}</p>
      <p>{{weatherinfo.WS || '2级'}}</p>
    </div>
    <div class="header_center">国网泉州供电公司党员大数据</div>
    <div class="header_right">{{time}}</div>
  </div>
</template>

<script>
import moment from "moment"
import "moment/locale/zh-cn"
import {jsonp} from "../../api/request"
export default {
  name: 'TopHeader',
  data() {
    return{
      time: moment().format('YYYY-MM-DD dddd HH:mm:ss'),
      weatherinfo: {}
    }
  },
  mounted() {
    setInterval(() => {
      this.time = moment().format('YYYY-MM-DD dddd HH:mm:ss')
    }, 1000)
    this.getLeft()
    setInterval(()=>{
      this.getLeft()
    },10000)
  },
  methods: {
    getLeft() {
      jsonp('http://www.weather.com.cn/data/sk/101230501.html').then(res => {
        console.log(res, 'weatherinfo')
        this.weatherinfo = res.weatherinfo
      })
    }
  }
}
</script>

<style lang="less">
// #top-header {
//   position: relative;
//   width: 100%;
//   height: 200px;
//   display: flex;
//   justify-content: space-between;
//   flex-shrink: 0;
//   .header-center-decoration {
//     width: 40%;
//     height: 120px;
//     margin-top: 60px;
//   }
//   .header-left-decoration, .header-right-decoration {
//     width: 25%;
//     height: 120px;
//   }
//   .center-title {
//     position: absolute;
//     font-size: 60px;
//     font-weight: bold;
//     left: 50%;
//     top: 30px;
//     transform: translateX(-50%);
//   }
// }
#top-header{
  height: 353px;
  background: url("../../assets/img/header/header_bg.png") no-repeat left top;
  background-size: cover;
  position: relative;
  z-index: 9999;
.header_left{
  width: 1483px;
  height: 134px;
  background: url("../../assets/img/header/left_bg.png") no-repeat left top;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 30px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  color: #F0E203;
  font-weight: 300;
  letter-spacing: 10px;
}
.header_left p{
  margin-left: 44px;
}
.header_center{
  width: 2934px;
  height: 180px;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: url("../../assets/img/header/center_bg.png") no-repeat left top;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 86px;
  line-height: 41px;
  letter-spacing: 20px;
}
.header_right{
  width: 1483px;
  height: 134px;
  background: url("../../assets/img/header/right_bg.png") no-repeat left top;
  background-size: cover;
  position: absolute;
  right: 0;
  top: 30px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: 300;
  letter-spacing: 8px;
}
}
</style>